﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="js/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="js/jquery-easyui-1.3.1/themes/metro/easyui.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.mlens-1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="js/project/init.js" type="text/javascript"></script>

    <style type="text/css">
        span.commandButton
        {
        	cursor:pointer;
        }
        span.commandButton img
        {
        	margin:3px 0 3px 3px;
        }
    </style>
    <script type="text/javascript">
        var imageData = {
            count: 3,
            img: [
                {
                    src: 'images/a.jpg',
                    width: 693,
                    height: 970
                },
                {
                    src: 'images/b.jpg',
                    width: 373,
                    height: 495
                },
                {
                    src: 'images/c.jpg',
                    width: 1024,
                    height: 768
                }

            ]
        };
        var config = {
            showModeX: 1,
            showModeY: 1,
            currentPageNo: 1,
            totalPage: 2,
            workMode: 0,
            showText: true,
            // 窗宽窗位
            ww:4096, 
            wc:2048
        }

        // ****显示模式：适应、完整显示
        function setShowMode(mode) {
            var id = $("div.backgroundDivSelected").attr("id");
            var index = Number(id.replace(/img/, ""));
            var canvas = $("div.backgroundDivSelected>canvas");
            if (canvas.length > 0) {
                var w = Number(canvas.attr("width").replace(/px/, ""));
                var h = Number(canvas.attr("height").replace(/px/, ""));
                var context = canvas[0].getContext('2d');
                set_load_image_mode(context, index, w, h, mode);
            }
        }

        // ****缩放
        function enlarge(flag) {
            var id = $("div.backgroundDivSelected").attr("id");
            var index = Number(id.replace(/img/, ""));
            var canvas = $("div.backgroundDivSelected>canvas.canvas_image");
            if (canvas.length > 0) {
                var w = Number(canvas.attr("width").replace(/px/, ""));
                var h = Number(canvas.attr("height").replace(/px/, ""));

                var times = flag ? 1.2 : 0.8;

                var nw = imageData.img[index].showRect.sw * times;
                var nh = imageData.img[index].showRect.sh * times;

                imageData.img[index].showRect.sw = nw;
                imageData.img[index].showRect.sh = nh;
                var x = w / 2 - nw / 2;
                if (x < 0) {
                    x = 0;
                }
                var y = h / 2 - nh / 2;
                if (y < 0) {
                    y = 0;
                }

                imageData.img[index].showRect.sx = x;
                imageData.img[index].showRect.sy = y;

                var context = canvas[0].getContext('2d');
                context.save();
                context.clearRect(0, 0, w, h);
                changeRotate(context, index, w, h);
                context.drawImage(imageData.img[index].img,
                    imageData.img[index].showRect.ox, imageData.img[index].showRect.oy, imageData.img[index].showRect.ow, imageData.img[index].showRect.oh,
                    imageData.img[index].showRect.sx, imageData.img[index].showRect.sy, nw, nh);
                context.restore();
                showImageText(context);
            }
        }



        // ****旋转
        function rotate(right) {
            var id = $("div.backgroundDivSelected").attr("id");
            var index = Number(id.replace(/img/, ""));
            var canvas = $("div.backgroundDivSelected>canvas.canvas_image");
            if (canvas.length > 0) {
                var w = Number(canvas.attr("width").replace(/px/, ""));
                var h = Number(canvas.attr("height").replace(/px/, ""));

                var context = canvas[0].getContext('2d');
                context.save();
                context.clearRect(0, 0, w, h);

                if (right) {
                    imageData.img[index]["showRect"]["rotate"]++;
                    if (imageData.img[index]["showRect"]["rotate"] == 4) {
                        imageData.img[index]["showRect"]["rotate"] = 0;
                    }
                } else {
                    imageData.img[index]["showRect"]["rotate"]--;
                    if (imageData.img[index]["showRect"]["rotate"] == -4) {
                        imageData.img[index]["showRect"]["rotate"] = 0;
                    }
                }
                changeRotate(context, index, w, h);
                context.drawImage(imageData.img[index].img,
                            imageData.img[index].showRect.ox, imageData.img[index].showRect.oy,
                            imageData.img[index].showRect.ow, imageData.img[index].showRect.oh,
                            imageData.img[index].showRect.sx, imageData.img[index].showRect.sy,
                            imageData.img[index].showRect.sw, imageData.img[index].showRect.sh);
                context.restore();
                showImageText(context);
            }
        }

        // ****设置显示模式---BEGIN
        function setTableMode() {
            $('#modeXInput').numberspinner('setValue', config.showModeX);
            $('#modeYInput').numberspinner('setValue', config.showModeY);
            $("#tableModeConfigWindow").css("display", "").dialog({
                title: '展示设置',
                width: 300,
                height: 150,
                modal: true
            });
        }

        function saveTableMode() {
            config.showModeX = $("#modeXInput").numberspinner('getValue');
            config.showModeY = $("#modeYInput").numberspinner('getValue');
            doLayout("canvasDiv");
            $("#pageLabel").html(config.currentPageNo + "/" + config.totalPage);
            $("#tableModeConfigWindow").dialog("close");
        }

        function closeTableModeConfigWindow() {
            $("#tableModeConfigWindow").dialog("close");
        }
        // ****设置显示模式---END

        // ****翻页
        function turnPage(last) {
            if (last) {
                if (config.currentPageNo <= 1) {
                    return;
                }
                config.currentPageNo--;
            } else {
                if (config.currentPageNo >= config.totalPage) {
                    return;
                }
                config.currentPageNo++;
            }
            $("div.pageDiv").css("display", "none");
            $("div.pageDiv[pageNo='pn" + (config.currentPageNo - 1) + "']").css("display", "");

            $(".backgroundDiv").css("border-color", "white")
                               .removeClass("backgroundDivSelected");
            $("div.pageDiv[pageNo='pn" + (config.currentPageNo - 1) + "'] > div.backgroundDiv:first")
                    .css("border-color", "red")
                    .addClass("backgroundDivSelected");
            $("#pageLabel").html(config.currentPageNo + "/" + config.totalPage);
        }

        // ****显示/不显示相关信息
        function makeImageTextDisplay() {
            if (!config.showText) {
                config.showText = true;
                $("#showImageTextImg").css("display", "");
                $("#notShowImageTextImg").css("display", "none");
            } else {
                config.showText = false;
                $("#showImageTextImg").css("display", "none");
                $("#notShowImageTextImg").css("display", "");
            }
            refreshAllCanvas();
        }

        // ****初始化显示
        $(function () {
            init_show_images("canvasDiv");
            $("#pageLabel").html(config.currentPageNo + "/" + config.totalPage);

            $("#east").find("span.commandButton").click(function () {
                $("#east").find("span.commandButton").each(function () {
                    $(this).find("img:first").css("display", "none");
                    $(this).find("img:last").css("display", "");
                });
                $(this).find("img:first").css("display", "");
                $(this).find("img:last").css("display", "none");
                config.workMode = $(this).attr("mode");
            });
        });

        function makeMagnifierDisplay() {
            if (config.workMode != magnifier_mode) {
                config.workMode = magnifier_mode;
                /*
                var pn = "pn"+(config.currentPageNo-1);
                $("div.pageDiv[pageno='" + pn + "']")
                .find("canvas.canvas_image")
                .each(function () {
                var index = Number($(this).parent().attr("id").replace(/img/, ""));

                $(this).mlens({
                imgSrc: imageData.img[index].src,   // path of the hi-res version of the image
                lensShape: "circle", 			    // shape of the lens (circle or square)
                lensSize: 200, 				        // size of the lens (in px)
                borderSize: 2, 				        // size of the lens border (in px)
                borderColor: "#fff", 			    // color of the lens border (#hex)
                borderRadius: 0					    // border radius (optional, only if the shape is square)
                });
                });*/
            } else {
                config.workMode = move_mode;
            }

            if (config.workMode == magnifier_mode) {
                $("#magnifierWork").css("display", "");
                $("#magnifierNotWork").css("display", "none");
            } else {
                $("#magnifierWork").css("display", "none");
                $("#magnifierNotWork").css("display", "");
            }
        }

    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',border:false" style="height:42px; background-color:Gray;">
        <div id="tableModeConfigWindow" style="display:none;">
            <table style="width:100%;">
                <tr>
                    <th>行设置</th>
                    <td><input id="modeXInput" class="easyui-numberspinner" data-options="min:1,max:10" /></td>
                </tr>
                <tr>
                    <th>列设置</th>
                    <td><input id="modeYInput" class="easyui-numberspinner" data-options="min:1,max:10" /></td>
                </tr>
                <tr>
                    <td colspan="2" style=" text-align:center">
                        <a href="javascript:saveTableMode();" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">确定</a>
                        <a href="javascript:closeTableModeConfigWindow();" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
                    </td>
                </tr>
            </table>
        </div>

        <span class="commandButton" onclick="setTableMode();">
            <img alt="表格" src="images/system/tables.png" />
        </span>
        <span class="commandButton" onclick="setShowMode(0);">
            <img alt="适应" src="images/system/zoomFit.png" />
        </span>
        <span class="commandButton" onclick="setShowMode(1);">
            <img alt="完整" src="images/system/zoomFull.png" />
        </span>
        <span class="commandButton" onclick="enlarge(true);">
            <img alt="放大" src="images/system/zoomIn.png" />
        </span>
        <span class="commandButton" onclick="enlarge(false);">
            <img alt="缩小" src="images/system/zoomOut.png" />
        </span>
        
        <span class="commandButton" onclick="rotate(true);">
            <img alt="右转" src="images/system/rotateRight.png" />
        </span>
        <span class="commandButton" onclick="rotate(false);">
            <img alt="左转" src="images/system/rotateLeft.png" />
        </span>
        <span class="commandButton" onclick="makeImageTextDisplay();">
            <img id="showImageTextImg" alt="展示" src="images/system/userInfo.png" />
            <img id="notShowImageTextImg" alt="不展示" src="images/system/userInfoNone.png" style="display:none" />
        </span>
        <!--
        <span id="magnifierCommandButton" class="commandButton" onclick="makeMagnifierDisplay();">
            <img id="magnifierWork" alt="放大镜" src="images/system/magnifier.png" style="display:none" />
            <img id="magnifierNotWork" alt="放大镜" src="images/system/zoomOriginal.png" />
        </span>
        -->

        <span style="position:absolute;right:10px;">
            <span class="commandButton" onclick="turnPage(true);">
                <img alt="上页" src="images/system/last.png" />
            </span>
            <label id="pageLabel" style=" font-size:x-large; font-weight:bold"></label>
            <span class="commandButton" onclick="turnPage(false);">
                <img alt="下页" src="images/system/next.png" />
            </span>
        </span>
    </div>
    <div id="east" data-options="region:'east',border:false" style="width:40px; background-color:Aqua; border:1 solid"> 
        <span class="commandButton" mode="0">
            <img title="移动" src="images/system/move2.png" />
            <img src="images/system/move1.png" style="display:none" />
        </span>
        <span class="commandButton" mode="2">
            <img title="窗宽窗位" src="images/system/c2.png" style="display:none" />
            <img src="images/system/c1.png" />
        </span>
    </div>
    <div id="canvasDiv" data-options="region:'center',border:false">  
        
    </div>
</body>
</html>
